<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue常用指令2</title>
    <style>
        .dark {
            color: black;
            font-size: 15px;
        }

        .light {
            color: #7bb7f3;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <ul>
        <!--绑定事件，使用v-on: 或 @ 接上事件名，如@click-->
        <!--当你使用v-on或@绑定事件后，只能从Vue实例中获取方法进行调用-->
        <!-- v-bind指令 能够实现绑定标签中的属性，那么属性就可以使用Vue的数据以及表达式，
        如 v-bind:class 就是绑定标签内的class属性，可以在后面的""内编写表达式以及使用Vue实例的数据，
        也可以直接简写为 :class -->
        <li v-for="item in arr" @click="show(item)" v-bind:class="item.flag?'light':'dark'"
            @mouseover="item.flag = true" @mouseout="item.flag = false">
            <!--如果要在视图中获取Vue实例内的数据，
            那么必须使用插值表达式或v-text/v-html/v-model指令-->
            {{item.subject}} --- {{item.score}}
        </li>
    </ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            // 列举列表内容
            arr: [{
                // 设置列表项是否被光标指定的标识
                flag: false,
                subject: '语文',
                score: 90
            },
                {
                    // 设置列表项是否被光标指定的标识
                    flag: false,
                    subject: '数学',
                    score: 91
                },
                {
                    // 设置列表项是否被光标指定的标识
                    flag: false,
                    subject: '英语',
                    score: 92
                }]
        },
        methods: {
            show(item) {
                console.log(item.subject)
            }
        }
    })
</script>
</html>